<script setup>
import {ArrowDown, Delete, Edit, Pointer, Search, Star} from "@element-plus/icons-vue";
import {ref} from "vue";
import {deleteListCollectionPractice, pageCollectionPractice} from "../../../api/user/user.js";
import router from "../../../router/index.js";
import {ElMessage} from "element-plus";

const total = ref(0);
const practiceName = ref('');
const collectionPractice = ref([
  {
    id: '1',
    name: '题目1',
    difficulty: 0,
    type: 0,
    subject: '数学',
    visits: 0
  }
]);
// 删除题目id列表
const currentPage = ref(1);

const pageSize = ref(9);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const checkAll = ref(false);
const isIndeterminate = ref(false);
const selectedCards = ref(collectionPractice.value.map(() => false));
const isDelete = ref(false);
const condition = ref({});
const difficulties = ['简单', '中等', '困难'];
const types = ['单选题', '多选题', '判断题', '填空题', '简答题'];
const tags = ref([]);

// 全选和反选的回调函数
const handleCheckAllChange = (val) => {
  selectedCards.value = selectedCards.value.map(() => val);
  isIndeterminate.value = false;
};

// 卡片选择状态改变时的回调函数
const handleCardSelectionChange = () => {
  const selectedCount = selectedCards.value.filter(Boolean).length;
  checkAll.value = selectedCount === selectedCards.value.length;
  isIndeterminate.value = selectedCount > 0 && selectedCount < selectedCards.value.length;
};

//删除收藏
const startDelete = () => {
  isDelete.value = true;
}

//取消收藏
const cancelDelete = () => {
  isDelete.value = false;
  selectedCards.value = collectionPractice.value.map(() => false);
  checkAll.value = false;
  isIndeterminate.value = false;
}

// 添加/更换标签
const displayTag = (condition, item) => {
  for (const index in tags.value) {
    if (tags.value[index].condition === condition) {
      tags.value[index].item = item;
      return;
    }
  }
  tags.value.push({condition: condition, item: item});
};

// 关闭标签
const handleClose = (tag) => {
  tags.value.splice(tags.value.indexOf(tag), 1)
};
// 删除条件
const handleDeleteCondition = (tag) => {
  delete condition.value[tag.condition];
}
// 添加/修改条件
const addCondition = (key, value) => {
  condition.value[key] = value;
};
// 查询收藏题目
const handleCollectionPracticePage = async () => {
  condition.value['pageNum'] = currentPage.value;
  condition.value['pageSize'] = pageSize.value;
  condition.value['practiceName'] = practiceName.value;
  await pageCollectionPractice(condition.value).then(res => {
    total.value = res.data.total;
    collectionPractice.value = res.data.data;
    selectedCards.value = collectionPractice.value.map(() => false);
    checkAll.value = false;
    isIndeterminate.value = false;
  })
};
// 批量删除收藏
const handleDeleteListCollectionPractice = async () => {
  // console.log(selectedCards.value);
  const practiceIdList=[];
  for(let i = 0; i < selectedCards.value.length; i++){
    if(selectedCards.value[i])practiceIdList.push(collectionPractice.value[i].id);
  }
  console.log(practiceIdList);
  await deleteListCollectionPractice(practiceIdList).then(() => {
    ElMessage.success("删除成功");
    cancelDelete();
    handleCollectionPracticePage();
  })
}


handleCollectionPracticePage();
</script>


<template>
  <div class="common-layout">
    <el-container>
      <el-header style="margin-top: 10px">
        <div class="div-search">
          <el-dropdown>
            <el-button type="primary" style="width: 100px;margin-right: 10px">
              难度
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu v-model="difficulties">
                <el-dropdown-item v-for=" (difficulty,index) in difficulties"
                                  @click="displayTag('difficulty', difficulty);
                                addCondition('difficulty',index)"
                                  :key="difficulty">
                  {{ difficulty }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" style="width: 100px;margin-right: 10px">
              题型
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                    v-for="(type,index) in types"
                    @click="displayTag('type',type);
                  addCondition('type',index)">
                  {{ type }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-input
              v-model="practiceName"
              style="width: 240px;float: right;"
              placeholder="请输入课程名称"
          >
            <template #append>
              <el-button :icon="Search" @click="handleCollectionPracticePage"/>
            </template>
          </el-input>
        </div>
        <el-tag
            v-for="tag in tags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag);handleDeleteCondition(tag)"
            style="margin-right: 10px;margin-top: 10px"
        >
          {{ tag.item }}
        </el-tag>
      </el-header>

      <el-main style="height: 65vh;position: relative;">
        <div class="management">
          <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              v-if="isDelete"
          >
            全选
          </el-checkbox>
          <el-button type="primary" plain v-if="!isDelete" @click="startDelete()" class="button-delete">管理收藏</el-button>
          <div v-if="isDelete" class="button-delete">
            <el-button type="primary" plain @click="cancelDelete()">取消</el-button>
            <el-button type="primary" plain @click="handleDeleteListCollectionPractice()">删除收藏</el-button>
          </div>
        </div>
        <el-row :gutter="20" style="margin-top: 40px;">
          <el-col :span="8" v-for="(item,index) in collectionPractice" :key="index">
            <el-card class="practice" shadow="hover" @click="!isDelete && router.push('/practice/'+item.id)">
              <div >
                <el-checkbox
                    v-model="selectedCards[index]"
                    @change="handleCardSelectionChange"
                    @click.stop
                    v-if="isDelete"
                    style="display: flex;"
                >
                  <div>
                    <div style="display: flex; align-items: center; flex-wrap: wrap;margin-bottom: 10px">
                      <div>{{ item.name }}</div>
                    </div>
                    <div style="display: flex; align-items: center; flex-wrap: wrap;">
                      <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">
                        {{ difficulties[item.difficulty] }}
                      </el-tag>
                      <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">{{
                          types[item.type]
                        }}
                      </el-tag>
                      <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">
                        {{ item.subject }}
                      </el-tag>
                    </div>
                  </div>
                </el-checkbox>
                <div v-if="!isDelete" >
                  <div style="display: flex; margin-left: 10px;">
                    <div>{{ item.name }}</div>
                  </div>
                  <div style="display: flex; align-items: center; flex-wrap: wrap;">
                    <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">
                      {{ difficulties[item.difficulty] }}
                    </el-tag>
                    <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">
                      {{types[item.type]}}
                    </el-tag>
                    <el-tag type="primary" style="margin-right: 10px; margin-top: 4px;">
                      {{ item.subject }}
                    </el-tag>
<!--                    <div style="display: flex; align-items: center; margin-top: 4px;margin-left: auto;">-->
<!--                      <el-icon style="margin-right: 4px;">-->
<!--                        <Pointer/>-->
<!--                      </el-icon>-->
<!--                      <div>{{ item.visits }}</div>-->
<!--                    </div>-->
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="pagination">
          <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, prev, pager, next"
              :total="total"
              @change="handleCollectionPracticePage"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.practice {
  height: 100px;
  margin: 10px auto;
}

.pagination {
  position: absolute;
  bottom: 0; /* 沉底 */
  right: 0; /* 靠右 */
  display: flex;
  justify-content: right;
}

.management {
  display: flex;
  position: relative;
}

.button-delete {
  position: absolute;
  right: 1%;
}
</style>
